<template>
    <div>
        <div class="main_right">
            <div class="creative_center">粉丝中心</div>
            <div class="kt">
                
            </div>
            <div class="icon">
                <svg t="1597752294502" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="22649" width="100" height="100">
                    <path
                        d="M384 192c52.928 0 96 43.072 96 96s-43.072 96-96 96-96-43.072-96-96 43.072-96 96-96m0 256c88.224 0 160-71.776 160-160s-71.776-160-160-160-160 71.776-160 160 71.776 160 160 160M704 352a64 64 0 1 1-0.032 128.032A64 64 0 0 1 704 352m0 192c70.592 0 128-57.408 128-128s-57.408-128-128-128-128 57.408-128 128 57.408 128 128 128M772.576 608.096h-137.12c-2.944 0-5.76 0.416-8.64 0.64A160.128 160.128 0 0 0 480 512H288c-88.192 0-160 71.776-160 160v224h64v-224c0-52.928 43.072-96 96-96h192c52.96 0 96 43.072 96 96v224h64v-223.904h132.576c32.768 0 59.424 26.656 59.424 59.392V896h64v-164.512a123.52 123.52 0 0 0-123.424-123.392"
                        fill="#463a6a" p-id="22650"></path>
                </svg>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <span>关注了</span>
                        <router-link to="/UserMlFollow/UserMlFol1" tag="h3" id="concernNum">{{bfans.fans}}</router-link>
                        
                    </li>
                    <li>
                        <span>关注者</span>
                        <router-link to="/UserMlFollow/UserMlFol2" tag="h3" id="concernNums">{{fans.fans}}</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
      isActive: true,
      ownuids:'',
      fans:'',
      bfans:''
    };
  },
  created(){
    this.ownuids=this.$store.state.ownUid
    this.$axios.get('/api/users/fans',{params:{uId:this.ownuids}})
                .then(res=>{
                    this.fans=res.data.data[0]
                    // console.log('fans',this.fans.fans)
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    this.$axios.get('/api/users/bfans',{params:{uId:this.ownuids}})
                .then(res=>{
                    this.bfans=res.data.data[0]
                    // console.log('fans',this.bfans)
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    // this.$axios.get('/api/users/bfans',{params:{uId:this.ownuids}})
    //             .then(res=>{
    //                 this.bfans=res.data.data[0]
    //                 console.log('fans',this.bfans)
    //             })
    //             .catch(err=>{
    //                 console.log('err:',err)
    //             })
  }
}
</script>
<style>
.main_right {
    /* clear: both; */
    width: 330px;
    height: 280px;
    margin-top: -25px;
    margin-bottom: 20px;
    background-color: #fff;
    opacity: 0.9;
    box-shadow: 0 0 5px 2px rgb(204, 217, 235);
    float: right;
    overflow: hidden;
    
}
.main_right .icon {
    width: 100px;
    height: 100px;
    margin: 30px auto;
}

.main_right .creative_center {
    width: 100px;
    height: 30px;
    background-color: rgb(89, 81, 165);
    border-radius: 10px;
    float: left;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-weight: 600;
    margin: 5px 0 0 10px;
}

.main_right .kt {
    height: 30px;
    width: 80px;
    float: right;
    font-size: 14px;
    margin-top: 5px;
    line-height: 30px;
    color: #aaa;
}

.main_right .kt svg {
    position: relative;
    top: 5px;
    left: -5px;
}

.main_right .bottom {
    width: 280px;
    height: 80px;
    box-shadow: 0px 2px 3px 0px rgb(204, 217, 235);
    float: left;
    margin: 10px 25px;
}

.bottom ul {
    list-style: none;
    padding: 0;
}

.bottom li {
    display: inline-block;
    width: 48%;
    height: 80px;
    text-align: center;
    /* background-color: cadetblue; */
}

.bottom span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color: #aaa;
}

.bottom h3 {
    color: rgb(48, 42, 100);
}

.bottom li+li {
    border-left: 1px solid rgb(204, 217, 235);
}
.bottom:hover{
    cursor: pointer;
}
.kt a{
    text-decoration: none;
    color: #aaa;
}
</style>